<template>
	<view class="add-supplier-container">
		<view class="form-section">
			<u-form :model="formData" ref="uForm" label-position="left" label-width="160rpx">
				<u-form-item label="供应商名称" prop="supplierName" required>
					<u-input v-model="formData.supplierName" placeholder="请输入供应商名称" />
				</u-form-item>
				
				<u-form-item label="联系人" prop="contactName">
					<u-input v-model="formData.contactName" placeholder="请输入联系人" />
				</u-form-item>
				
				<u-form-item label="手机" prop="mobileNumber">
					<u-input v-model="formData.mobileNumber" placeholder="请输入手机号码" type="number" />
				</u-form-item>
				
				<u-form-item label="电话" prop="phoneNumber">
					<u-input v-model="formData.phoneNumber" placeholder="请输入座机电话" type="number" />
				</u-form-item>
				
				<u-form-item label="送货地址" prop="businessAddress">
					<u-input v-model="formData.businessAddress" placeholder="请输入送货地址" />
				</u-form-item>
				
				<u-form-item label="应付款" prop="amountPayable">
					<u-input v-model="formData.amountPayable" placeholder="0.00" type="number" disabled />
				</u-form-item>
				
				<u-form-item label="初始应付款" prop="initialPayment">
					<u-input v-model="formData.initialPayment" placeholder="0.00" type="number" />
				</u-form-item>
				
				<u-form-item label="备注" prop="remark">
					<u-input v-model="formData.remark" placeholder="请输入备注信息" type="textarea" />
				</u-form-item>
			</u-form>
		</view>
		
		<!-- 底部保存按钮 -->
		<view class="bottom-btn">
			<button class="save-btn" @click="saveSupplier">保存</button>
		</view>
	</view>
</template>

<script>
	import api from '@/utils/api.js'
	export default {
		data() {
			return {
				formData: {
					supplierName: '',
					contactName: '',
					mobileNumber: '',
					phoneNumber: '',
					businessAddress: '',
					amountPayable: '0.00',
					initialPayment: '0.00',
					remark: ''
				},
				// 表单验证规则
				rules: {
					supplierName: [
						{
							required: true,
							message: '请输入供应商名称',
							trigger: ['blur', 'change']
						}
					],
					mobileNumber: [
						{
							pattern: /^1[3-9]\d{9}$/,
							message: '请输入正确的手机号码',
							trigger: ['blur', 'change']
						}
					]
				}
			}
		},
		onReady() {
			// 设置表单验证规则
			this.$refs.uForm.setRules(this.rules);
		},
		methods: {
			// 保存供应商信息
			saveSupplier() {
				console.log('点击了保存');
				this.$refs.uForm.validate().then(valid => {
					console.log('验证结果:', valid);
					if (valid) {
						console.log('验证通过');
						// 添加振动反馈
						uni.vibrateShort();
						
						uni.showLoading({
							title: '保存中...'
						});
						
						// 模拟保存操作
						api.addSupplier(this.formData).then(res => {
							uni.hideLoading();
							if (res.code === 200) {
								uni.showToast({
									title: '保存成功',
									icon: 'success',
									duration: 1500
								});
							} else {
								uni.showToast({
									title: res.message || '保存失败',
									icon: 'none'
								});
							}
						}).catch(err => {
							uni.hideLoading();
							console.error('保存供应商失败:', err);
							uni.showToast({
								title: '保存失败，请重试',
								icon: 'none'
							});
						});
							// 延迟返回上一页
							setTimeout(() => {
								// 尝试导航返回
								try {
									uni.navigateBack({
										delta: 1,
										animationType: 'slide-out-right',
										success: () => {
											console.log('返回成功');
										},
										fail: (err) => {
											console.error('导航返回失败:', err);
											// 备用导航方法
											uni.redirectTo({
												url: '/pages/supplier/index'
											});
										}
									});
								} catch (e) {
									console.error('导航异常:', e);
									uni.showToast({
										title: '返回异常，请手动返回',
										icon: 'none'
									});
								}
							}, 1000);
						}
					});
				}
			}
		}
	
</script>

<style lang="scss" scoped>
.add-supplier-container {
	min-height: 100vh;
	background-color: #f5f7fa;
	padding-bottom: 120rpx;
	padding-top: 40rpx; /* 添加顶部内边距避免状态栏遮挡 */
	position: relative;
}

.form-section {
	background-color: #fff;
	padding: 0 20rpx;
	
	/deep/ .u-form-item {
		min-height: 100rpx;
		
		.u-form-item__body__left__content {
			color: #333;
			font-size: 28rpx;
		}
		
		.u-form-item__body__right__content {
			.u-input {
				font-size: 28rpx;
			}
		}
	}
}

.bottom-btn {
	position: fixed;
	bottom: 0;
	left: 0;
	right: 0;
	padding: 20rpx;
	background-color: #39C9BB;
	
	.save-btn {
		width: 100%;
		height: 80rpx;
		line-height: 80rpx;
		background-color: #39C9BB;
		color: #fff;
		font-size: 30rpx;
		border: none;
	}
}
</style> 